import React, {Component} from "react";
import {
    View,
    StyleSheet,
    Text,
    FlatList,
    AsyncStorage,
    TextInput,
} from 'react-native';

const data = [
    {name: 'name', label: '姓名'},
    {name: 'code', label: '人员编码'},
    {name: 'department', label: '单位'},
    {name: 'job_title', label: '职务/职称'},
]

export default class WorkTool extends Component {
    static navigationOptions = ({navigation}) => {
        const params = navigation.state.params || {};

        return {
            headerTitle: params.title,
        };
    }

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            code: '',
            department: '',
            job_title: '',
        }
    }

    componentWillMount() {
        AsyncStorage.getItem('user', (err, ret) => {
            let res = JSON.parse(ret);
            this.setState({
                username: res.name,
                code: res.code,
                department: res.department.name,
                job_title: res.job_title,
                name: res.name
            })
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.row}>
                    <Text style={styles.title}>姓名</Text>
                    <TextInput
                        style={styles.text}
                        onChangeText={(text) => this.setState({username: text})}
                        value={this.state.username}
                        underlineColorAndroid={'#387ef5'}
                    />
                </View>
                <View style={styles.row}>
                    <Text style={styles.title}>人员编码</Text>
                    <TextInput
                        style={styles.text}
                        onChangeText={(text) => this.setState({code: text})}
                        value={this.state.code}
                        underlineColorAndroid={'#387ef5'}
                    />
                </View>
                <View style={styles.row}>
                    <Text style={styles.title}>单位</Text>
                    <TextInput
                        style={styles.text}
                        onChangeText={(text) => this.setState({department: text})}
                        value={this.state.department}
                        underlineColorAndroid={'#387ef5'}
                    />
                </View>
                <View style={styles.row}>
                    <Text style={styles.title}>职务/职称</Text>
                    <TextInput
                        style={styles.text}
                        onChangeText={(text) => this.setState({job_title: text})}
                        value={this.state.job_title}
                        underlineColorAndroid={'#387ef5'}
                    />
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white",
        paddingBottom: 30,
        paddingTop: 20,
    },
    row: {
        paddingLeft: 40,
        paddingRight: 20,
    },
    title: {
        fontSize: 12,
        color:"#999"
    },
    text: {
        fontSize: 16,
        color: "#000",
        borderBottomColor: "#ccc" ,
        paddingTop:5
    },
})